<template>
  <div class="exam-card">
    <!-- 复选框 -->
    <input
      type="checkbox"
      class="exam-checkbox"
      :checked="selectedExams.has(resource.exam_id)"
       @click.stop="handleToggle(resource.exam_id)"
    />
    
    <!-- 视频封面 -->
    <div v-if="resource.cover" class="video-cover">
      <img :src="resource.cover" alt="视频封面" />
       <div class="play-button">
        <img src="@/assets/picture/play.png"  alt="播放" />
      </div>
    </div>

    <!-- 资源内容 -->
    <div class="exam-content">
      <div class="exam-header">
        <span class="badge" :class="statusBadgeClass(resource.status)">
          {{ statusLabel(resource.status) }}
        </span>
        <p style="font-weight:bold;">{{ resource.paper_title }}</p>
        <div v-show="resource.showActions" class="exam-actions">
          <button class="edit-button">编辑</button>
          <button class="edit-button">发布</button>
          <button class="edit-button">删除</button>
        </div>
      </div>
      <p>老师: {{ resource.username }}</p>
      <div style="display:flex; font-size: 12px; color: gray;">
        <p style="margin-right: 10px;">创建时间: {{ resource.create_time }}</p>
        <p style="margin-right: 10px;">发布时间: {{ resource.publish_time ? resource.publish_time: '未设置' }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ResourceCard',
  props: {
    resource: Object,
    selectedExams: Set,
    statusConfig: Array,
  },
  methods: {
    // 添加事件处理方法
    handleToggle(examId) {
      this.$emit('toggle-selection', examId);
    },
    statusLabel(status) {
      const statusItem = this.statusConfig.find(item => item.value === status);
      return statusItem ? statusItem.label : '未知状态';
    },
    statusBadgeClass(status) {
      const statusItem = this.statusConfig.find(item => item.value === status);
      return statusItem ? statusItem.badgeClass : 'badge-new';
    }
  }
};
</script>

<style scoped>
.play-button {
  position: absolute;
  width: 50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

.video-cover:hover .play-button {
  display: block; /* 鼠标悬停时显示播放按钮 */
}

.play-button img {
  width: 50px; /* 调整大小 */
  height: 50px;
}
.exam-card {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: relative;
  transition: transform 0.3s;
  margin-bottom: 15px;
  display: flex;
  align-items: flex-start;
}

.exam-card:hover {
  transform: translateY(-5px);
  background-color: #f0f0f0;
}

/* 视频封面样式 */
.video-cover {
  width: 18vw;
  height: 20vh;
  margin-right: 15px;
  position: relative; 
}

.video-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.exam-checkbox {
  margin-right: 15px;
  margin-top: 20px;
  cursor: pointer;
}

.exam-content {
  flex: 1;
}

.exam-header {
  display: flex;
  align-items: center;
  gap: 15px;
}

.badge {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 12px;
  font-size: 14px;
}

.badge-unpublished {
  background-color: #ffd6d6;
  color: #d9534f;
}

.badge-unstart {
  background-color: #cae2f9;
  color: #519bd5;
}

.badge-in-progress {
  background-color: #d6ffdb;
  color: #3b995c;
}

.badge-closed {
  background-color: #f0f0f0;
  color: #666;
}

.exam-actions {
  margin-left: auto;
  display: flex;
  gap: 10px;
  position: absolute;
  right: 0;
  top: 0;
}

.edit-button,
.delete-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  color: #244382;
  font-size: 14px;
  transition: color 0.3s;
}

.edit-button:hover,
.delete-button:hover {
  color: #1e3661;
}
</style>
